<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>模块表</title>
    <link rel="stylesheet" href="../../../../res/layui-v2.5.6/css/layui.css">
    <!-- 数字框 -->
    <link href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="../../../../res/layui-v2.5.6/layui.js" charset="utf-8"></script>
    <script src="../../../../res/js/jquery-3.4.1.min.js"></script>

</head>
<body>
<button type="button" id="btn2" class="layui-btn  layui-btn-primary" style="background-color: #009688; color:#ffffff; border-radius: 7px" >保存</button>
<button type="button" id="btn6" class="layui-btn  layui-btn-primary">关闭所有</button>
<button type="button" id="btn7" class="layui-btn  layui-btn-primary">展开所有</button>
<button type="button" id="btn9" class="layui-btn  layui-btn-primary">刷新数据</button>

<table class="layui-hide" id="tableId" lay-filter="tableEvent" ></table>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="../js/jquery.input-counter.min.js"></script>
</body>
<script type="text/html" id="img">
    <img src="{{d.images}}" width="100" height="150" onclick="showBig(this)"/>
</script>
<!-- 数字框 -->
<script type="text/html" id="returnCount">
    {{# if(d.count != null && d.repertoryCount != null){ }}
        <div onchange="updateValue2(123)" style="height: 100%;width: 100%"  >
        <div class="input-counter input-group"  >
            <div class="input-group-prepend" >
                <button type="button" class="btn-add btn btn-primary" >
                    <i class="fa fa-plus"></i>
                </button>
            </div>
            <input type="text" class="form-control counter"  onkeyup="this.value=this.value.replace(/\D/g,'')"  name="addAndSubtract"   data-min="0" data-max="{{d.count != null ? d.count>=d.repertoryCount ? d.repertoryCount : d.count : ''}}" data-default="{{d.count != null ? d.count>=d.repertoryCount ? d.repertoryCount : d.count : ''}}" >
            <div class="input-group-append"  >
                <button type="button" class="btn-subtract btn btn-primary"    >
                    <i class="fa fa-minus"></i>
                </button>
            </div>
        </div>
        </div>
    </div>
    {{# }}}
</script>
<script type="text/html" id="state">
    {{#if(d.returnCount>d.count && d.returnCount>d.repertoryCount){}}
    0
    {{#}else{}}
    无效
    {{#}}}
</script>
<script>
    let item1 = window.localStorage.getItem("pcId");
    var dataclik = "";
    var moduleId = "";
    layui.config({
        base: '../js/'
    }).extend({
        tableEdit:'tableEdit'  //表格树依赖我另外写的tableEdit模块，本项目就有。
        ,tableTree:'tableTree'
    }).use(['form','table','layer',"tableTree"], function () {
        var table = layui.table
            ,$ = layui.$
            ,tableTree = layui.tableTree
            ,form = layui.form
            ,layer = layui.layer // 弹层;
        function templet(d,field){
            if(!d[field])return '';
            if(typeof d[field] === 'string')return d[field];
            if(!Array.isArray(d[field]))return d[field].value ? d[field].value : '';
            var str = [];
            d[field].forEach(function (e) {str.push(e.value)});
            return str.join(' || ');
        }
        var treeTable = tableTree.render({
            elem: '#tableId'
            ,id:'tableTree'
            ,url:'../../../../../orderReturnApply/selectDrug?id='+ item1
            ,height: 'full-90'
            ,page: true
            ,treeConfig:{ //表格树所需配置
                showField:'typeName' //表格树显示的字段
                ,treeid:'drugId' //treeid所对应字段的值在表格数据中必须是唯一的，且不能为空。
                ,treepid:'typeId'//父级id字段名称
                ,iconClass:'layui-icon-triangle-r' //小图标class样式 窗口图标 layui-icon-layer
            }
            ,cols: [[
                {type:'checkbox'}
                ,{field:'typeName',title:'药品类型'}
                ,{field:'drugName',title: '药品名称'}
                ,{field:'drugOut',title:'批发价格',sort:true}
                ,{field:'images', title: '图片', templet:'#img'}
                ,{field:'drugExp', title: '药品说明',event:'moduleArea'}
                ,{field:'taboo',title:'主要用药禁忌'}
                ,{field:'alias',title:'别名'}
                ,{field:'count',title: '订单总量'}
                ,{field:'repertoryCount',title:'库存总量'}
                ,{field:'returnCount', title: '退货总量',templet:'#returnCount' }
            ]],
            done(res){
                var options = {
                    selectors: {
                        addButtonSelector: '.btn-add',
                        subtractButtonSelector: '.btn-subtract',
                        inputSelector: '.counter',
                    },
                    settings: {
                        checkValue: true,
                        isReadOnly: false,
                    },
                };
                $(".input-counter").inputCounter(options);
            }
        });



        treeTable.on('tool(tableEvent)',function (obj) {
            var field = obj.field; //单元格字段
            var value = obj.value; //修改后的值
            console.log(obj.value);
            var data = obj.data; //当前行数据
            var event = obj.event; //当前单元格事件属性值
            //event为del为删除 add则新增 edit则修改。这个三个值固定死了，切莫定义与之三个重复的event。
            if(event !== 'del' && event !== 'add' ){
                var update = {};
                update[field] = value;
                obj.update(update);
                console.log(obj)
            }
            if(event == 'edit'){
            }

            if(event === 'del'){
                obj.del();
                alert("修改");
            }
            if(event === 'add'){
                //可ajax异步请求后台,后台返回数据后用 obj.add(,rs) 进行回调生成表格树。
                moduleId = data.moduleId;
                layer.open({
                    type: 2,
                    area : ['65%' , '70%'],//弹出框大小
                    shift:1,//弹出框动画效果
                    content: ['moduleFormTwoAddUpdate.html','on'], //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                    success:function(layero,index){
                        var body = layer.getChildFrame('body',index);//确定两个页面之间的父子关系
                        //将弹出页面的取消按钮设置点击事件
                        body.find("#closeUpdate").on("click",function(){
                            layer.close(index);
                        })
                    }
                });
            }
        });

        /**
         * 表格树排序，与layui进行了整合。
         */
        table.on('sort(tableEvent)', function(obj){
            treeTable.sort({field:obj.field,desc:obj.type === 'desc'})
        });

        $('button').click(function () {
            var id = $(this).attr("id");
            if(id==="btn1"){
                //data可以为空，为空则创建空行，否则按照data数据生成行
                var data = {"id":13,"pid":333,"name":"张三13","danxuan":null,"duoxuan":[{"name":1,"value": "张三1"},{"name":2,"value": "张三2"}],"birthday":""};
                treeTable.addTopRow(data);//该方法生成的行是最上级的行
            }else if(id === 'btn2') {
                var tableOne = treeTable.getCheckedData();
                var nums = document.getElementsByName("addAndSubtract");
                tableOne.forEach((item,index)=>{item.returnCount = nums[index].value})
                window.parent.mes = tableOne;
                window.localStorage.setItem("mes",tableOne);
                console.log(tableOne); //获取选中行数据
                var dataStr = treeTable.getCheckedData();
                var num = dataStr.length;
                var ziz ;
                for(var b=0;b<num;b++){
                    ziz+=dataStr[b];
                    console.log(dataStr[b]);
                }
                $('#dataclik').val(treeTable.getCheckedData());
            }else if(id === 'btn3') {
                dataclik=treeTable.getTableTreeData();//获取表格树所有数据
            }else if(id === 'btn4') {
                treeTable.closeCheckedRows(); // 关闭选中行树节点
            }else if(id === 'btn5') {
                treeTable.openCheckedRows(); // 展开选中行树节点
            }else if(id === 'btn6') {
                treeTable.closeAllRows();  //关闭所有树节点
            }else if(id === 'btn7') {
                treeTable.openAllRows(); //展开所有树节点
            }else if(id === 'btn8') {
                console.log(treeTable.getTreeOptions()); //获取表格配置
            }else if(id === 'btn9'){
                treeTable.reload(); //表格树进行reload
            }else {
                treeTable.delCheckedRows(); //删除选中行
            }
        });
    });
    function showBig(obj) {
        $("#imgDiv").fadeToggle(1000);
        $("#imgDiv_img").prop("src", obj.src)
    }
    function updateValue(obj) {
        alert(obj.value-1);
    }
</script>
<div id="imgDiv" style="display:none;position:fixed ;left:35%;top:30%">
    <img src="" id="imgDiv_img" width="100%" height="100%" onclick="showBig(this)">
    <div style="display:none;"  id="dataclik" value="123" ></div>
</div>
</html>